<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../css/style.css">
    <script src="../jquery-3.4.1.js"></script>
    <script src="../lib/Manage.js"></script>

</head>

<body>

</body>
<script>
    class Box {
        constructor(data) {
            this.data = data;
            this.root = null;
        }
        init() {
            this.renderUI();
            this.eventHandler();
        }
        renderUI() {
            this.root = document.createElement("div");
            this.root.classList.add('site-header');

            //创建每一个title的li标签
            let titleTemp = this.data.titles.map((ele, index) => `<li class=${index==0?"current":""}>${ele}</li>
                `).join("");
            //把titleTemp插入到上面的大盒子
            let titleHtml = `<div class="container-title">
                    <ul class="container-title-list">${titleTemp}</ul>
                </div`;
            //渲染li里面的每一条数据
            let bobyTemp = this.data.list.map((ele, index) => {
                let liTemp = ele.map(item => {
                    return `
                        <li>
                            <img src=${item.src} alt="">
                            <div class="name">${item.title}</div>
                            <div class="price">${item.price}</div>
                        </li>`
                }).join("");

                return `<ul class="container-body-list ${index==0?" active":""}">
                                <div class="line"></div>${liTemp}
                            </ul>`
            }).join("");
        }
    }
    $.ajax({
        type: "get",
        url: "../server/09-getJSON.php",
        // dataType: "json",
        success: function (response) {
            console.log(response);

        }
    });
</script>

</html>